<template>
  <div class="question">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <!--<el-select v-model="listQuery.subject" style="width:120px;" @change="handleFilter">-->
          <!--<el-option-->
          <!--v-for="item in options"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value"-->
          <!--/>-->
          <!--</el-select>-->
          <el-input
            v-model="listQuery.title"
            placeholder="标题"
            style="width:220px;"
            @keyup.enter.native="handleFilter"
          />
          <!--<el-input-->
          <!--v-model="listQuery.author"-->
          <!--placeholder="作者"-->
          <!--style="width:220px;"-->
          <!--@keyup.enter.native="handleFilter"-->
          <!--/>-->
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          <!--<el-select v-model="listQuery.status" style="width:150px;" @change="handleFilter">-->
          <!--<el-option-->
          <!--v-for="item in status"-->
          <!--:key="item.value"-->
          <!--:label="item.label"-->
          <!--:value="item.value"-->
          <!--/>-->
          <!--</el-select>-->
        </el-col>
      </el-row>
    </section>
    <subtable
      :table-label="tableLabel"
      :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="first" type="selection" min-width="2"/>
      <el-table-column slot="second" label="问答" align="left" min-width="30">
        <template slot-scope="scope">
          <el-button type="text" @click="showQuestionsDialog(scope.row)">{{ scope.row.title }}</el-button>
          <div v-html="scope.row.content.substring(0, 50)">
            <p
              style="margin:0;color:#8a8a8a;font-size:14px;"
            >{{ scope.row.content.substring(0, 50) }}</p>
          </div>
          <el-button type="text">{{ scope.row.courseName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column slot="third" label="作者" align="center" min-width="10">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column slot="button" label="操作" align="center" min-width="20">
        <template slot-scope="scope">
          <el-button type="danger" @click="deleteCLick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </subtable>

    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <user-dialog
      :visiabledialog="userdialog"
      :dialog-data="dialogData"
      @changeVisiable="userdialog = false"
    />
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 评价详情弹框 -->
    <el-dialog :visible.sync="questionDialog" title="回答详情" width="50%">
      <el-form ref="questionInfoForm" :model="questionInfoForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="提问者">
              <span>{{ questionInfoForm.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提问时间">
              <span>{{ questionInfoForm.createTimeStr }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table :data="questionInfoForm.tableData.slice((questionInfoCurrentpage-1)*questionInfoPagesize,questionInfoCurrentpage*questionInfoPagesize)">
          <el-table-column label="回答内容" align="left" min-width="30">
            <template slot-scope="scope">
              <div v-html="scope.row.content.substring(0, 50)">
                <p
                  style="margin:0;color:#8a8a8a;font-size:14px;"
                >{{ scope.row.content.substring(0, 50) }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="回答者" align="center" min-width="10">
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回答时间" align="center" min-width="10">
            <template slot-scope="scope">
              <span>{{ scope.row.createTimeStr }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="questionInfoTotal"
          :current-page="questionInfoCurrentpage"
          :page-size="questionInfoPagesize"
          @handleSizeChange="questionInfoHandleSizeChange"
          @handleCurrentChange="questionInfoHandleCurrentChange"
        />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="questionDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import UserDialog from '@/components/Dialog';
  import Subtable from "@/components/Eltable";
  import Pagination from "@/components/Pagination"; // 分页组件
  import {deleteCourseThread, getQuestionDetail, list} from "@/api/subject/course_thread"; // 接口
  import {getTenantId} from "@/utils/auth"

  export default {
    components: {
      Pagination,
      Subtable,
      UserDialog
    },
    data() {
      return {
        userdialog: false,
        questionDialog: false,
        dialogData: {},
        total: 0,
        currentpage: 1,
        pagesize: 10,
        questionInfoTotal: 0,
        questionInfoCurrentpage: 1,
        questionInfoPagesize: 10,
        listFilter: [],
        listQuery: {
          // author: "",
          // subject: "",
          title: ""
          // status: "所有"
        },
        options: [
          {
            label: "标题",
            value: "标题"
          },
          {
            label: "内容",
            value: "内容"
          },
          {
            label: "课程名",
            value: "课程名"
          }
        ],
        status: [
          {
            label: "未回复",
            value: "未回复"
          },
          {
            label: "所有",
            value: "所有"
          }
        ],
        tableLabel: [
          {
            label: "查看",
            width: "20",
            prop: "hitNum"
          },
          {
            label: "创建时间",
            width: "20",
            prop: "createTimeTimeStr"
          }
        ],
        tableData: [],
        questionInfoForm: {
          tableData: []
        },
        handleDelete: false,//删除
        deleteRow: '',
        deleteCLick(row) {
          this.handleDelete = true;
          this.deleteRow = row;
        }
      };
    },
    created() {
      this.getData();
    },
    methods: {
      handleClickDialog(scope) {
        this.dialogData = scope.row
        this.userdialog = true
      },
      handleSizeChange(val) {
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800);
        }
      },
      // 改变当前页
      handleCurrentChange(val) {
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800);
        }
      },
      handleFilter() {
        this.getData()
      },
      clearParams() {
        // this.listQuery.author = []
        // this.listQuery.subject = ''
        this.listQuery.title = ''
        // this.listQuery.status = '所有'
        this.getData()
      },
      getData() {
        list(getTenantId(), this.listQuery.title).then(response => {
          this.tableData = response.data.items;
          this.listFilter = response.data.items;
          this.total = response.data.items.length;
        });
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteCourseThread(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getData();
        })
      },
      showQuestionsDialog(row) {
        this.questionDialog = true
        this.questionInfoForm.userName = row.userName
        this.questionInfoForm.createTimeStr = row.createTimeStr
        this.questionInfoForm.tableData = []
        var rowid = row.id
        getQuestionDetail(rowid).then(res => {
          this.questionInfoForm.tableData = res.data.items
          this.questionInfoTotal = res.data.items.length
        })
      },
      questionInfoHandleSizeChange(val) {
        this.questionInfoCurrentpage = 1;
        this.questionInfoPagesize = val.value;
        if (this.questionInfoPagesize >= 20) {
          scrollTo(50, 800);
        }
      },
      // 改变当前页
      questionInfoHandleCurrentChange(val) {
        this.questionInfoCurrentpage = val.value;
        if (this.questionInfoPagesize >= 20) {
          scrollTo(50, 800);
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  .question {
    margin-top: 0;
    padding: 14px 20px 21px 20px;

    .search-content {
      width: 100%;
    }
  }
</style>
